<template>
  <div class="Stock">
    <el-row>
      <el-col :span="24" class="TextAlignL">
        <h2 style="color: #666;">采购订单</h2>
      </el-col>
      <el-col :span="24">
        <el-form ref="conditionForm" :model="conditionForm" label-position="left" label-width="70px">
          <el-row :gutter="20" type="flex" class="row-bg">
            <el-col :span="6">
              <el-form-item label="单据编号">
                <el-input v-model="conditionForm.FBillNo" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物料代码">
                <el-input v-model="conditionForm.FNumber" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物料名称">
                <el-input v-model="conditionForm.FName" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格">
                <el-input v-model="conditionForm.FModel" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目号">
                <el-input v-model="conditionForm.gcName" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex" class="row-bg">
            <el-col :span="12">
              <el-form-item label="状态" label-width="50px">
                <el-radio-group v-model="conditionForm.fstatus">
                  <el-radio
                    v-for="item in gyscgstatusOptions"
                    :key="item.value"
                    :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="是否要求送货" label-width="100px">
                <el-checkbox v-model="issonghuo" @change="changeSH">是</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="" style="margin-top: 7px;">
              <el-button size="mini" type="primary" @click="search">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="width: 100%;height: 4px; border-bottom: 1px dashed #ccc;">
      </el-col>
      <el-col :span="24" style="width: 100%;height: 4px; margin: 20px  0 ">
        <el-row>
          <el-col :span="2">
            <el-button type="primary" @click="handleExportXls('采购订单')" size="mini" icon="el-icon-download">导出</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="MarginT_20">
        <el-table id="out-table"
          :data="dataList"
          v-loading="listLoading"
          :row-class-name="tableRowClassName"
          @sort-change="handleSortChange"
          style="width: 100%">
          <!-- @selection-change="handleSelectionChange" -->
          <!-- <el-table-column
            type="selection"
            width="55">
          </el-table-column> -->
          <el-table-column
            type="index"
            fixed="left"
            width="50">
          </el-table-column>
          <el-table-column
            property="FBillNo"
            label="单据编号"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FDate"
            label="日期"
            width="100"
            sortable="custom"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FNumber"
            label="物料代码"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FName"
            label="物料名称"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FModel"
            label="规格"
            width="300"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="funit"
            label="单位"
            width="50">
          </el-table-column>
          <el-table-column
            property="FAuxQty"
            label="数量"
            width="50"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FAuxTaxPrice"
            label="单价"
            width="50"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FAllAmount"
            label="总价"
            width="80"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="jhtime"
            label="交货日期"
            width="100"
            sortable="custom"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FEntrySelfP0281"
            label="确认交货日期"
            width="150"
            sortable="custom"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FEntrySelfP0275"
            label="特殊要求"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="auditDate"
            label="图纸日期"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                :disabled="scope.row.isedit != 1"
                @click="editDate(scope.$index, scope.row)">交货日期</el-button>
            </template>
          </el-table-column>
          <el-table-column
            property="FAuxReceiptQty"
            label="收料"
            width="50"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FAuxReturnQty"
            label="退料"
            width="50"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FAuxStockQty"
            label="入库"
            width="50"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FAuxQtyInvoice"
            label="开票"
            width="50"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="gcName"
            label="项目号"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" class="TextAlignR MarginT_20" v-if="dataList.length > 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="curPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="sum">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 修改日期 -->
    <el-dialog title="修改交货日期" :visible.sync="dialogDateVisible" width="450" :close-on-click-modal="false">
      <el-row>
        <el-col :span="3" class="MarginB_10">交货日期</el-col>
        <el-col :span="20" class="MarginB_10">
          <el-date-picker
            v-model="FEntrySelfP0281"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDateVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitModify">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getQueryParams, getOptionsByDictcode } from '../util/utils'

export default {
  name: 'PurchaseOrder',
  data () {
    return {
      listLoading: false,
      dialogDateVisible: false,
      gyscgstatusOptions: [],
      dataList: [],
      FEntrySelfP0281: '',
      conditionForm: {
        fsupplierid: null,
        FBillNo: '',
        FNumber: '',
        FName: '',
        FModel: '',
        fstatus: '',
        issonghuo: '',
        gcName: ''
      },
      issonghuo: false,
      curPage: 1,
      pageSize: 100,
      sum: 0,
      sortProp: '',
      sortOrder: ''
    }
  },
  computed: {
    ...mapState({
      fsupplierid: state => state.fsupplierid
    })
  },
  components: {
  },
  created () {
    getOptionsByDictcode(this, 'gyscgstatus').then(res => {
      this.gyscgstatusOptions = res
    })
    this.search()
  },
  methods: {
    handleSortChange ({ prop, order }) {
      this.sortProp = prop
      this.sortOrder = order
      this.getStockList()
    },
    handleExportXls (fileName) {
      if (!fileName || typeof fileName !== 'string') {
        fileName = '导出文件'
      }
      let formatData = getQueryParams({...this.conditionForm, ...{fsupplierid: this.fsupplierid}}, {})
      this.Http.downFile('/yw_supplier_user/ywSupplierUser/exportXls', formatData).then(res => {
        console.log(res)
        if (!res.data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([res.data], {type: 'application/vnd.ms-excel'}), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/vnd.ms-excel'}))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          window.URL.revokeObjectURL(url)
        }
      })
    },
    tableRowClassName ({row, rowIndex}) {
      if (row.issonghuo === 1) {
        return 'yellowDark-row'
      }
      return ''
    },
    changeSH (value) {
      this.conditionForm.issonghuo = value ? 1 : ''
    },
    search () {
      this.curPage = 1
      this.getStockList()
    },
    handleCurrentChange () {
      this.getStockList()
    },
    getStockList () {
      this.listLoading = true
      let formatData = getQueryParams({...this.conditionForm, ...{fsupplierid: this.fsupplierid, column: `${this.sortProp}`, order: `${this.sortOrder}` === 'descending' ? 'desc' : (`${this.sortOrder}` === 'ascending' ? 'asc' : '')}}, {current: this.curPage, pageSize: this.pageSize})
      this.Http.get('/yw_supplier_user/ywSupplierUser/list', formatData
      ).then(res => {
        if (res.data.success) {
          this.dataList = res.data.result.records
          this.sum = res.data.result.total
          this.listLoading = false
        }
      }).catch((error) => {
        console.log(error)
        this.listLoading = false
      })
    },
    editDate (index, record) {
      this.curRow = record
      this.FEntrySelfP0281 = ''
      this.dialogDateVisible = true
    },
    submitModify () {
      if (!this.FEntrySelfP0281) {
        this.$message({
          message: '请选择交货日期!',
          type: 'warning'
        })
        return false
      }
      this.Http.post('/yw_supplier_user/ywSupplierUser/editFEntrySelfP0281?FInterID=' + this.curRow.FInterID + '&FEntryID=' + this.curRow.FEntryID + '&FEntrySelfP0281=' + this.FEntrySelfP0281
      ).then(res => {
        if (res.data.success) {
          this.$message({
            message: '修改成功!',
            type: 'success'
          })
          this.dialogDateVisible = false
          this.getStockList()
        } else {
          this.$message({
            message: '修改失败!',
            type: 'error'
          })
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@Padding: 24px;
.Stock{
  width: calc(100% - 2*@Padding);
  background: #fff;
  padding: 0 @Padding @Padding @Padding;
  margin-top: @Padding;
}
</style>
